<template>
  <view class="page container-page">
    <view class="no-data-box" v-if="!netWorkStatus">
      <no-data status="no_xinhao" title="暂无网络，请检查网络设置"></no-data>
    </view>
    <block v-else>
      <view class="page-box">
        <index
          v-if="caches[0]"
          v-show="current === 0"
          key="0"
          ref="page0"
        ></index>
        <college
          v-if="caches[1]"
          v-show="current === 1"
          key="1"
          ref="page1"
        ></college>
        <equipment
          v-if="caches[2]"
          v-show="current === 2"
          key="2"
          ref="page2"
        ></equipment>
        <aichat
          v-if="caches[3]"
          v-show="current === 3"
          key="3"
          ref="page3"
        ></aichat>
        <mine
          v-if="caches[4]"
          v-show="current === 4"
          key="4"
          ref="page4"
        ></mine>

        <view class="popup" :animation="false" v-show="showPopup">
          <Loading></Loading>
        </view>
      </view>
      <my-tabbar
        :class="[
          current === 0 || current === 3 || current === 4 ? 'white' : '',
        ]"
        :value="current"
        :list="dataList"
        :mid-button="true"
        :border-top="true"
        :infinite="infinite"
        inactive-color="#939393"
        active-color="#1d4c98"
        @change="onChange"
        stop
        ref="tabbar"
      >
        <image
          :src="baseURL + 'tab_shebei1.png'"
          class="tabbar-icon"
          :class="{ active: current == 2 }"
          slot="activeIcon"
          v-if="current == 2"
        />
      </my-tabbar>
    </block>
  </view>
</template>

<script>
import index from "../../pages/index/index.vue";
import college from "../../pages/college/index.vue";
import equipment from "../../pages/equipment/equipment.vue";
import aichat from "../../pages/aichat/index.vue";
import mine from "../../pages/mine/mine.vue";
import Loading from "@/components/public/loading/loading";
import uniPopup from "@/components/uni-popup/uni-popup";
import noData from "@/components/public/noData/noData";
import { mapState, mapActions, mapMutations } from "vuex";
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
import { throttle } from "@/utils";
import myTabbar from "@/my-components/my-tabbar/my-tabbar";
let baseURL = imgBaseUrlV2 + "tabbar/";
export default {
  components: {
    index,
    college,
    equipment,
    aichat,
    mine,
    Loading,
    uniPopup,
    noData,
    myTabbar,
  },
  computed: {
    ...mapState(["netWorkStatus"]),
  },
  data() {
    return {
      current: 1,
      title: "",
      infinite: false,
      showPopup: false,
      pageHeadStyle: {},
      caches: [0, 0, 0, 0, 0],
      baseURL,
      dataList: [
        {
          iconPath: baseURL + "tab_weibao.png?v=1",
          selectedIconPath: baseURL + "tab_weibao_h.png?v=1",
          text: "RHWS",
          count: 0,
          customIcon: false,
          style: {
            backgroundColor: "",
            color: "#fff",
          },
        },
        {
          iconPath: baseURL + "tab_xueyuan.png?v=1",
          selectedIconPath: baseURL + "tab_xueyuan_h.png?v=1",
          text: "学院",
          count: 0,
          customIcon: false,
          style: {
            backgroundColor: "",
          },
        },
        {
          iconPath: baseURL + "device.png?v=1",
          selectedIconPath: baseURL + "tab_shebei.png?v=1",
          text: "设备",
          midButton: true,
          count: 0,
          customIcon: false,
          style: {
            backgroundColor: "",
          },
        },
        // {
        //   iconPath: baseURL + "tab_xiaoxi.png?v=1",
        //   selectedIconPath: baseURL + "tab_xiaoxi_h.png?v=1",
        //   text: "消息",
        //   count: 0,
        //   customIcon: false,
        //   style: {
        //     backgroundColor: "",
        //   },
        // }, 
        {
          iconPath: baseURL + "tab_xiaoxi.png?v=1",
          selectedIconPath: baseURL + "tab_xiaoxi_h.png?v=1",
          text: "AI对话",
          count: 0,
          customIcon: false,
          style: {
            backgroundColor: "",
          },
        },
        {
          iconPath: baseURL + "tab_wode.png?v=1",
          selectedIconPath: baseURL + "tab_wode_h.png?v=1",
          text: "我的",
          count: 0,
          customIcon: false,
          style: {
            backgroundColor: "",
          },
        },
      ],

      lastScrollEvent: {
        scrollTop: 0,
      },
    };
  },
  methods: {
    ...mapActions("User", ["getUserPermission"]),
    ...mapMutations(["setPageTitle"]),
    init() {
      uni.$on("stopPullDownRefresh", (data) => {
        uni.stopPullDownRefresh();
      });
      this.time = 0;
      uni.$on("showLoading", () => {
        this.showPopup = true;
        this.time = +new Date();
        this.$refs.globalPopup ? this.$refs.globalPopup.open() : "";
      });
      uni.$on("hideLoading", async () => {
        this.infinite = false;
        let now = +new Date();
        let t = now - this.time;
        if (t <= 1000 * 0.5) {
          await new Promise((resolve) => {
            setTimeout(function () {
              resolve(1);
            }, 500 - t);
          });
          this.showPopup = false;
          this.$refs.globalPopup ? this.$refs.globalPopup.close() : "";
        } else {
          this.showPopup = false;
          this.$refs.globalPopup ? this.$refs.globalPopup.close() : "";
        }
      });
    },
    onChange(e) {
      this.current = e;
      let page = this.$refs["page" + e];

      if (!this.caches[e]) {
        uni.$emit("showLoading");
        this.caches[e] = true;
      }
      let item = this.dataList[e] || {};
      let title = item.text;
      this.pageHeadStyle = item.style;
	  console.log('?????sissss',page)
      this.$nextTick(() => {
        if (page) {
		  console.log('onChangePage??????')
          typeof page.onChangePage == "function" && page.onChangePage(e);
          typeof page.onScroll == "function" &&
            page.onScroll(this.lastScrollEvent);
        }
      });
      this.title = title;
      this.setPageTitle(title);
      uni.stopPullDownRefresh();
    },
    onScroll(e) {
      let page = this.$refs["page" + this.current];
      if (page) {
        typeof page.onScroll == "function" && page.onScroll(e);
      }
    },
  },

  onPageScroll: throttle(function (e) {
    this.onScroll(e);
    this.lastScrollEvent = e;
  }, 24),
  onLoad(e) {
    uni.$on("change-page", this.onChange);
    uni.$on("change-page", (c) => console.log(c, "??ee"));
    console.log("load???????",e);
	if(e.pages) {
		this.current = Number(e.pages)
		this.init();
		if (e.toggle) {
		  this.onChange(e.toggle);
		} else {
		  this.onChange(this.current);
		}
	} else {
		this.init();
		if (e.toggle) {
		  this.onChange(e.toggle);
		} else {
		  this.onChange(2);
		}
	}
    
  },
  onShow(e) {
	  console.log(e,"onShow????")
	// if(e.pages) {
	//   this.current = e.pages  
	// }
    let page = this.$refs["page" + this.current];
    this.getUserPermission();
    if (page) {
      typeof page.pageShow == "function" && page.pageShow(e);
    }
    // #ifdef APP-PLUS
    this.$nextTick(() => {
      plus.navigator.setStatusBarBackground("light");
      plus.navigator.setStatusBarStyle("dark");
    });
    // #endif
  },
  onPullDownRefresh(e) {
    let c = this.current;
    if (this.current == 2) {
      this.$refs.tabbar && this.$refs.tabbar.reset();
      this.current = -1;
      this.$nextTick(() => {
        this.current = 2;
      });
      this.infinite = true;
    }
    let page = this.$refs["page" + c];
    if (page) {
      if (typeof page.pullDownRefresh == "function") {
        page.pullDownRefresh(e);
      } else {
        uni.stopPullDownRefresh();
      }
    } else {
      uni.stopPullDownRefresh();
    }
  },
  onReachBottom(e) {
    let page = this.$refs["page" + this.current];
    if (page) {
      typeof page.reachBottom == "function" && page.reachBottom(e);
    }
  },
};
</script>

<style lang="scss" scoped>
.no-data-box {
  height: 100vh;
  background: #fff;
}

.page-box {
  position: relative;
  z-index: 94;
  min-height: calc(100vh - var(--window-top) - 150rpx);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.popup {
  position: fixed;
  z-index: 1;
  z-index: 998;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.tabbar-icon {
  position: absolute;
  display: block;
  width: 70rpx;
  height: 70rpx;
  left: 0;
  right: 0;
  border-radius: 50%;
  // border: 2px solid#ffffff;
  /* top: -56rpx; */
  bottom: 30rpx;
  margin: auto;
  z-index: 10000;
  transform-origin: center center;
  &.active {
    animation: rotate 2s;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(275deg);
  }

  100% {
    transform: rotate(0);
  }
}
</style>
